<template>
    <el-dialog
        title="常用资源项"
        :visible.sync="show"
        append-to-body
        width="60%"
        @open="_open"
        center
        class="tree-dialog">
        <div class="tree-box">
            <div class="tree-left">
                <el-tree
                    ref="tree"
                    node-key="id"
                    highlight-current
                    :current-node-key="typeId"
                    :data="resourcesTree"
                    :props="defaultProps"
                    :default-expanded-keys="defaultExpanded"
                    @node-click="handleNodeClick">
                </el-tree>
            </div>
            <div class="tree-center">
                <p>请选择你需要检索的选项</p>
                <el-tree
                    :data="resourcesChildrenTree"
                    show-checkbox
                    node-key="id"
                    ref="termTree"
                    :default-expanded-keys="defaultChildrenExpanded"
                    :props="defaultProps"
                    @check="handleCheckChange">
                </el-tree>
            </div>
            <div class="tree-right">
                <p>已选项({{ selectedOption.length }})</p>
                <el-checkbox-group v-model="selectedOptionValue" @change="handleValChange">
                    <el-checkbox
                        v-for="(item, index) in selectedOption"
                        :key="index"
                        :label="item">
                        {{ item.fieldName }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class PersonSelection extends Vue {
    // 显示弹框
    show = false

    defaultProps = {
        children: "list",
        label: "name"
    };

    resourcesTree: any[] = []
    resourcesChildrenTree: any[] = []
    defaultExpanded: any[] = []
    defaultChildrenExpanded: any[] = []
    selectedOption: any[] = []
    selectedOptionValue: any[] = []
    currentId = ""
    typeId = ""

    // 打开
    _open() {
        this.getOptions();
    }

    // 获取选项内容
    async getOptions() {
        const res = await this.$server["retrieval/getTree"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.resourcesTree = res.data.data.map((item: any) => {
                return item.children ? { ...item, list: item.children } : { ...item };
            });
            this.defaultExpanded = [this.resourcesTree[0].id];
            this.typeId = this.resourcesTree[0].children[0].id;
            this.$nextTick(() => {
                (this.$refs.tree as any).setCurrentKey(this.resourcesTree[0].children[0].id);
            });
            this.handleNodeClick(this.resourcesTree[0].children[0]);
        }
    }

    handleNodeClick(data: any, node?: any) {
        this.currentId = data.id;
        if (node && node.level === 1) return false;
        this.resourcesChildrenTree = [{
            name: "全部",
            id: "ALL_LIST",
            list: data.children.map((item: any) => {
                return {
                    ...item,
                    list: item.labelList ? item.labelList.map((cur: any) => {
                        return {
                            ...cur,
                            name: cur.fieldName,
                            parentId: data.id
                        };
                    }) : []
                };
            })
        }];
        this.defaultChildrenExpanded = ["ALL_LIST", this.resourcesChildrenTree[0].list[0].id];
        this.$nextTick(() => {
            this.setKey();
        });
    }

    handleCheckChange() {
        const list = (this.$refs.termTree as any).getCheckedNodes(true);
        const newNodeList: any[] = [];
        this.selectedOption.forEach((item: any) => {
            if (item.parentId === this.currentId) {
                const index = list.findIndex((cur: any) => cur.id === item.id);
                if (index !== -1) {
                    newNodeList.push(item);
                    list.splice(index, 1);
                }
            } else {
                newNodeList.push(item);
            }
        });
        newNodeList.push(...list);
        this.selectedOption = newNodeList;
        this.selectedOptionValue = newNodeList;
    }

    handleValChange(val: any) {
        let deleteNode: any = {};
        this.selectedOption.forEach((item: any, i: number) => {
            const index = val.findIndex((cur: any) => cur.id === item.id);
            if (index === -1) {
                deleteNode = item;
                delete this.selectedOption[i];
            }
        });
        this.selectedOption = this.selectedOption.filter((item: any) => !!item);
        if (deleteNode.parentId === this.currentId) {
            this.setKey();
        }
    }

    setKey() {
        const nowNode: any[] = this.selectedOption.filter((item: any) => item.parentId === this.currentId).map((item: any) => item.id);
        (this.$refs.termTree as any).setCheckedKeys(nowNode);
    }

    // 取消
    close() {
        this.show = false;
    }

    // 保存
    save() {
        this.$emit("sure", {
            selectedList: this.selectedOptionValue
        });
        this.close();
    }

    // 关闭完成
    afterClose() {
        this.$nextTick(function() {
            this.$el.remove && this.$el.remove();
        });
        this.$emit("close");
    }
}
</script>

<style lang="scss" scoped>
.tree-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 20px;
        }
        .dialog-footer {
            .el-button {
                padding: 10px 60px;
                & + .el-button {
                    margin-left: 60px;
                }
            }
        }
    }
    .tree-box {
        height: 600px;
        display: flex;
        justify-content: space-between;
        & > div {
            &.tree-left {
                width: 20%;
                border: 1px solid #edeff2;
                height: 100%;
                overflow-y: scroll;
            }
            &.tree-center {
                width: 35%;
                height: 100%;
                .el-tree {
                    padding: 10px 12px;
                    height: calc(100% - 28px);
                    max-height: calc(100% - 28px);
                    overflow-y: scroll;
                    margin-top: 12px;
                    border: 1px solid #edeff2;
                }
            }
            &.tree-right {
                width: 35%;
                height: 100%;
                .el-checkbox-group {
                    padding: 10px 12px;
                    height: calc(100% - 28px);
                    max-height: calc(100% - 28px);
                    overflow-y: scroll;
                    margin-top: 12px;
                    border: 1px solid #edeff2;
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }

    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: #de2728;
        color: #fff;
    }

}
</style>
